<template>
	<view>
		<page-head headTitle="私人定制" :returnButton="true" :news="true" :sao="true" @clickLeftReturn="clickLeftReturn"
		 @clickRightNews="clickRightNews" @clickRightSao="clickRightSao"></page-head>
		<view class="m-t9 bg-white">
			<view class="search-h flex align-center p-l-r3 border-botton">
				<text class="flex flex-1" :class="outIndex!==0?'justify-content':''">
					<picker @change="bindPickerChange" :value="outIndex" :range="outArray" range-key="name">
						<view :class="outIndex!==0?'':'color-c'">{{outArray[outIndex].name}}</view>
						<input type="text" :value="outArray[outIndex].name" hidden />
					</picker>
				</text>
				<image src="/static/images/switch-arrow.png" class="switch-arrow m-l-r3" mode="widthFix">
					<text class="flex flex-1" :class="enterIndex!==0?'justify-content':''">
						<picker @change="bindPickerChangeEnter" :value="enterIndex" :range="enterArray" range-key="name">
							<view :class="enterIndex!==0?'':'color-c'">{{enterArray[enterIndex].name}}</view>
							<input type="text" :value="enterArray[enterIndex].name" hidden />
						</picker>
					</text>
			</view>
			<view class="search-h flex align-center color-c p-l-r3 border-botton">
				<uni-calendar :range="true" ref="calendar" :insert="false" @confirm="confirm"></uni-calendar>
				<text class="flex flex-1" @click="open" v-if="selecDate">选择出发日期、返程日期</text>
				<view class="flex fs-3 color-c" @click="open" v-if="displayDate">
					<view><text>{{startDate}}</text><text class="color-c p-l1">{{startWeek}}</text></view>
					<text class="p-lr">至</text>
					<view><text>{{endDate}}</text><text class="color-c p-l1">{{endWeek}}</text></view>
					<view class="color-c mr-6">共<text class="color-table">{{days}}</text>天</view>
				</view>
			</view>

			<view class="search-h flex align-center p-l-r3 border-botton">
				<text class="fs-3">人均预算</text>
				<input class="color-table fs-3 p-l4" placeholder-class="color-c fs-3" @input="setBudget" type="number" placeholder="不限制" />
			</view>
			<view class="search-h flex align-center p-l-r3">
				<text class="fs-3">需要提供哪些服务<text class="color-table">（多选）</text></text>
			</view>
			<view class="service-options flex flex-wrap m-t-2 p-t2">
				<view class="p-l1 p-r1 p-t1" :class="{'personal-active': listSelect.indexOf(index)!=-1}" v-for="(item,index) in listArray"
				 :key="index" @tap="tapInfo(index)"><text>{{item}}</text></view>
			</view>
			<border></border>
			<view class="search-h flex align-center p-l-r3">
				<text class="fs-3">其他需求<text class="color-table" ref="demands">（选填，300字内）</text></text>
			</view>
			<textarea class="p-l-r3 personal-mtext m-t-2 fs-2 color-table" @blur="setDemands" placeholder-class="color-c fs-2"
			 placeholder="可填写何时联系、酒店星级、位置、房型、必玩景点、 航班要求等... " />
			<border></border>
			<view class="search-h flex align-center p-l-r3 border-botton">
				<text class="fs-3">姓名</text>
				<input class="color-table fs-3 p-l4" type="text" @input="setName" placeholder-class="color-c fs-3" placeholder="请填写联系人姓名" />
			</view>
			<view class="search-h flex align-center p-l-r3 border-botton">
				<text class="fs-3">手机</text>
				<input class="color-table fs-3 p-l4 color-private" @input="setPhone" placeholder-class="color-c fs-3" type="number" placeholder="请填写联系人手机号码" />
			</view>
		</view>
		<bright-button title="提交" @licekSubmit="licekSubmit" class="m-t-b"></bright-button>
		
	</view>
</template>

<script>
import pageHead from '@/components/common/page-head.vue'
import border from '@/components/common/border.vue'
import brightButton from '@/components/common/bright-button.vue'
import uniCalendar from '@/components/uni-ui/uni-calendar/uni-calendar.vue'
	export default {
		components:{
			pageHead,
			border,
			brightButton,
			uniCalendar
		},
		data() {
			return {
				outArray: [{key:0, name:'选择出发地'}],
				outIndex: 0,
				enterArray: [{key:0, name:'选择目的地'}],
				enterIndex: 0,
				listArray:[],
				listSelect:[],
				startDate:0,
				endDate:0,
				days:0,
				displayDate:false,
				selecDate:true,
				startWeek:'',
				endWeek:'',
				budget:'',
				services:'',
				demands:'',
				contact_name:'',
				contact_mobile:'',
				postData:{},
			}
		},
		onLoad() {
			this.getCities();
			this.getServices();
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.outIndex = e.target.value
				if(this.outIndex > 0){
					this.postData.from_city = this.outArray[this.outIndex]['name'];
				}else{
					this.postData.from_city = '';
				}
			},
			bindPickerChangeEnter: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.enterIndex = e.target.value
				if(this.enterIndex > 0){
					this.postData.to_city = this.enterArray[this.enterIndex]['name'];
				}else{
					this.postData.to_city = '';
				}
			},
			getCities(){
				this.$myRequest({
					method:'POST',
					url:'/api/customize/cities',
				}).then(res=>{
					if(res.data.code == 1){
						var cityList = res.data.data.list;
						this.outArray = this.outArray.concat(cityList);
						this.enterArray = this.enterArray.concat(cityList);
					}
				})
			},
			getServices(){
				this.$myRequest({
					method:'POST',
					url:'/api/customize/services',
				}).then(res=>{
					if(res.data.code == 1){
						console.log(res);
						var serviceList = res.data.data.list;
						this.listArray = this.listArray.concat(serviceList);
						// this.enterArray = this.enterArray.concat(cityList);
					}
				})
			},
			clickLeftReturn(){
				uni.redirectTo({
					url: '../index/index'
				})
			},
			// 消息中心
			clickRightNews(){
				uni.navigateTo({
				    url: '../news-core/news-core'
				});
			},
			// 扫一扫
			clickRightSao(){
				
			},
			tapInfo(e){
				if (this.listSelect.indexOf(e) == -1) {
					this.listSelect.push(e);//选中添加到数组里
				} else {
					this.listSelect.splice(this.listSelect.indexOf(e), 1); //取消
				}
			},
			open(){
				this.$refs.calendar.open();
			},
			confirm(e) {
				let start = e.range.before;
				let end = e.range.after;
				var arr=start.split('-');
				this.startDate = Number(arr[1])+'.'+Number(arr[2]);
				arr=end.split('-');
				this.endDate = Number(arr[1])+'.'+Number(arr[2]);
				this.days = e.range.data.length;
				this.startWeek = e.startWeek;
				this.endWeek = e.endWeek;
				//赋值提交数据
				this.postData.from_date = e.range.before;
				this.postData.to_date = e.range.after;
				console.log(this.postData);
				if(this.days>0){
					this.displayDate = true;
					this.selecDate = false;
				}else{
					this.displayDate = false;
					this.selecDate = true;
				}
			},
			licekSubmit(){
				var checkService = this.listSelect;
				var from_city = this.postData.from_city;
				var to_city = this.postData.to_city;
				var from_date = this.postData.from_date;
				var to_date = this.postData.to_date;
				var budget = this.budget;
				var demands = this.demands;
				var name = this.contact_name;
				var phone = this.contact_mobile;
				if(!from_city || !to_city){
					this.showMessage('请选择出发地和目的地');return;
				}
				
				if(!from_date || !to_date){
					this.showMessage('请选择出发时间和返程时间');return;
				}
				
				if(!budget){
					this.showMessage('请输入预算金额');return;
				}
				
				if(!name || !phone){
					this.showMessage('请填写联系人名字和手机号码');return;
				}
				var services = '';
				if(checkService.length < 1){
					this.showMessage('请选择需要的服务');return;
				}else{
					for(var i=0;i<checkService.length;i++){
						services += this.listArray[checkService[i]]+",";
					}
				}
				this.$myRequest({
					method:'POST',
					url:'/api/customize/submit',
					data:{
						from_city:from_city,
						to_city:to_city,
						from_date:from_date,
						to_date:to_date,
						budget:budget,
						services:services,
						demands:demands,
						contact_name:name,
						contact_mobile:phone
					},
				}).then(res=>{
					if(res.data.code == 1){
						uni.redirectTo({
							url: '../custom-order/custom-order'
						})
					}else{
						this.showMessage(res.data.msg);
					}
				})
				// budget services contact_name contact_mobile
			},
			setBudget(e){
				this.budget = e.detail.value; 
			},
			setName(e){
				this.contact_name = e.detail.value; 
			},
			setPhone(e){
				this.contact_mobile = e.detail.value; 
			},
			setDemands(e){
				this.demands = e.detail.value;
			},
			showMessage(title){
				uni.showToast({
				    title: title,
				    duration: 3000,
					icon:"none",
				});
			}
		}
	}
</script>

<style scoped>
.service-options view{width: 25%;}
.service-options view text{display: block;border-radius: 6rpx; color: #CCCCCCFF;font-size: 24rpx; margin: 10rpx 20rpx; border: 2rpx solid #CCCCCCFF;text-align: center;}
.personal-mtext{height: 220rpx;line-height: 1.7;}
.personal-active text{background-color: #fff5ee;border: 2rpx solid #ff802e !important;color: #ff802e !important;}
</style>
